import classNames from 'classnames'
import { CSSTransitionProps } from 'react-transition-group/CSSTransition'

export const DISPLAY_NAME_TRANSITION = 'Transition'

type AnimationName =
  | 'zoom-in-top'
  | 'zoom-in-bottom'
  | 'zoom-in-left'
  | 'zoom-in-right'

export type TransitionProps = CSSTransitionProps & {
  animation?: AnimationName
  /**配置是否需要一个div包裹transition组件下的子元素 */
  needWrapper?: boolean
  /**子元素的wrapper的class 仅在needWrapper为true时有用 */
  wrapperClassName?: string
}

// 获取组件配置的class
export const getTransitionClassNames = (
  props: TransitionProps,
  extendClass?: () => Object
) => {
  return classNames('', extendClass && extendClass())
}
